import { useParams, useNavigate } from 'react-router-dom';
import { Card, Col, Divider, Layout, List, Row, Space, Tag } from "antd";
import { EnvironmentTwoTone, LeftOutlined, ContainerTwoTone, RightOutlined, ShoppingTwoTone, SnippetsTwoTone, DownCircleTwoTone } from "@ant-design/icons";
import React, { useEffect, useState } from "react";
import './index.css';

export default function OrderDetail() {
  const { id } = useParams();
  const { Content } = Layout;
  const navigate = useNavigate();
  const [orderDetails, setOrderDetails] = useState(null);
  const [productListDetail, setProductListDetail] = useState([]);

  // const getProductDetails = (productId) => productListDetail.find(product => product.id === productId);

  const fetchOrderAndProductDetails = () => {
    const orderList = JSON.parse(localStorage.getItem('orderList') || '{}');
    const productList = JSON.parse(localStorage.getItem('productList') || '{}');
    const order = orderList.find(order => order.orderId === Number(id));
    // console.log("order:",order);
    // console.log("orderData:",orderData);
    setOrderDetails(order);
    setProductListDetail(productList);
  };

  useEffect(() => {
    fetchOrderAndProductDetails();

    const handleStorageChange = () => {
      fetchOrderAndProductDetails();
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, [id]);

  if (!orderDetails) {
    return null;
  }

  const handleBack = () => {
    navigate('/myorder/all');
  };

  return (
      <Layout style={{ minHeight: '100vh', maxWidth: 414, margin: 'auto', backgroundColor: '#fff' }}>
        <div className="header-container" style={{ marginTop: 10, textAlign: "center", display: "flex", alignItems: "center", padding: '15px' }}>
          <LeftOutlined onClick={handleBack} />
          <h2 style={{ textAlign: "center", margin: "0 auto" }}>订单详情</h2>
        </div>

        <div style={{ background: '#FE4E84', padding: '35px' }}>
          <ContainerTwoTone twoToneColor="#FFF" />
          <span style={{ marginLeft: '20px', fontSize: '20px', color: '#FFF' }}>{orderDetails.status}</span>
        </div>

        <Content style={{ padding: '15px' }}>
          <Card>
            <div style={{ display: 'flex' }}>
              <h3 style={{ marginLeft: '10px' }}>{orderDetails.userId} 12345678901</h3>
              <RightOutlined style={{ marginLeft: 'auto' }} />
            </div>
            <EnvironmentTwoTone twoToneColor="#FB5B40" />
            <span style={{ marginLeft: '10px' }}>{orderDetails.address}</span>
          </Card>

          <Card bordered={false} style={{ marginTop: '15px' }}>
            <div style={{ display: 'flex' }}>
              <ShoppingTwoTone twoToneColor="#FB5B40" />
              <h3 style={{ marginLeft: '10px' }}>商品信息</h3>
            </div>
            <List
                itemLayout="vertical"
                size="large"
                dataSource={orderDetails.productList}
                renderItem={product => {
                  return (
                      <List.Item key={product.id}>
                        <div className="product-item">
                          <div className="product-image">
                            <img className="photo" src={product.details[0]} />
                          </div>
                          <div className="product-details">
                            <div className="product-name">{product.productName}</div>
                            <div className="product-description">{product.description}</div>
                            <Tag color="magenta" style={{ marginTop: '8px' }}>{product.services}</Tag>
                            <div className="product-price">￥{product.price}</div>
                          </div>
                        </div>
                      </List.Item>
                  );
                }}
            />
            <Divider />
            <List style={{ marginTop: '15px' }}>
              <List.Item style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ fontSize: '19px', flex: 1 }}>商品合计</span>
                <span style={{ fontSize: '19px', color: '#FB5B40' }}>{orderDetails.cost-orderDetails.discount+orderDetails.shipping}</span>
                <DownCircleTwoTone twoToneColor="#FB5B40" style={{ fontSize: '20px', marginLeft: '10px' }} />
              </List.Item>
              <List.Item style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ fontSize: '17px', flex: 1 }}>优惠</span>
                <span style={{ fontSize: '17px', color: '#FB5B40' }}>￥{orderDetails.discount}</span>
              </List.Item>
              <List.Item style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ fontSize: '17px', flex: 1 }}>运费</span>
                <span style={{ fontSize: '17px' }}>￥{orderDetails.shipping}</span>
              </List.Item>
              <List.Item style={{ display: 'flex', alignItems: 'center' }}>
                <span style={{ fontSize: '17px', flex: 1 }}>备注</span>
                <span style={{ fontSize: '17px' }}>{orderDetails.note}</span>
              </List.Item>
            </List>
          </Card>

          <Card bordered={false} style={{ marginTop: '15px' }}>
            <div style={{ display: 'flex' }}>
              <SnippetsTwoTone twoToneColor="#FB5B40" />
              <h3 style={{ marginLeft: '10px' }}>订单信息</h3>
            </div>
            <Card bordered={false}>
              <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                <Row>
                  <Col span={8}><strong>订单编号</strong></Col>
                  <Col span={16}>{orderDetails.orderId}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>备注:</strong></Col>
                  <Col span={16}>{orderDetails.note}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>支付方式:</strong></Col>
                  <Col span={16}>{orderDetails.paymentMethod}</Col>
                </Row>
                <Row>
                  <Col span={8}><strong>提交时间:</strong></Col>
                  <Col span={16}>{orderDetails.submitTime}</Col>
                </Row>
              </Space>
            </Card>
          </Card>
        </Content>
      </Layout>
  );
}
